﻿<UserControl x:Class="VAdvantage.Controls.SmoothExpander"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

    <UserControl.Resources>
        <Storyboard x:Name="sbCollapse">
            <DoubleAnimation Duration="0:0:0.3" To="22" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="sbExpand">
            <DoubleAnimation Duration="0:0:0.3" To="{Binding ElementName=SmoothExpander, Path=ActualWidth}" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
        </Storyboard>
    </UserControl.Resources>



    <Grid x:Name="LayoutRoot"   Width="180" Background="#FF525E68">
        <!--<Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0" />
                <GradientStop Color="#FF404952" Offset="1" />
                <GradientStop Color="#FF5E6B7B" Offset="0.381" />
                <GradientStop Color="#FF5C636A" Offset="0" />
                <GradientStop Color="#FF7B8186" Offset="0" />
                <GradientStop Color="#FF434D57" Offset="0.849" />
                <GradientStop Color="#FF404952" Offset="0.971" />
                <GradientStop Color="#FF525E68" Offset="0.576" />
                <GradientStop Color="#FF565D65" Offset="1" />
                <GradientStop Color="#FF69788B" Offset="0.01" />
            </LinearGradientBrush>
        </Grid.Background>-->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="MouseLeave">
                    <Storyboard>
                        <ColorAnimation Duration="0:0:0.2" To="#616e7f"  Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rect" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Duration="0:0:0.2" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rect" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto">
            </RowDefinition>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border Margin="0,0,0,0" x:Name="border" Opacity="0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"   HorizontalAlignment="Stretch" BorderThickness="0" CornerRadius="1" >
        </Border>
        <Grid x:Name="grid" Grid.Column="0" Grid.Row="0" Width="22" Height="22" MouseEnter="grid_MouseEnter" MouseLeave="grid_MouseLeave" MouseLeftButtonUp="grid_MouseLeftButtonUp" >
            <Rectangle x:Name="rect" Fill="Transparent"  Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2" Grid.Row="1">
            </Rectangle>
            <Path x:Name="path" Data="M224,176 C62.521194,242.20894 72.499382,207.5 224,276" VerticalAlignment="Center" HorizontalAlignment="Center"  Stretch="Fill" UseLayoutRounding="False"  Width="6" Height="10"  StrokeThickness="2" Stroke="#f1f3f6" Grid.Row="1" StrokeDashCap="Round" RenderTransformOrigin="0.5,0.5">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="0" ScaleX="1"/>
                </Path.RenderTransform>
            </Path>
        </Grid>


    </Grid>

</UserControl>
